<!DOCTYPE html>
<html>
<head>
    <title>Sonic Templatewww.tmd9.com</title>
	<meta name="keywords" content="sonic, responsive, free template, fluid layout, bootstrap, templatemo" />
	<meta name="description" content="Sonic is one-page responsive free template using Bootstrap. This layout is suitable for creative portfolio showcase." />
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/templatemo_misc.css">
	<link rel="stylesheet" href="css/templatemo_style.css">
</head>
<body>
	
	<!-- This one in here is responsive menu for tablet and mobiles -->
    <div class="responsive-navigation visible-sm visible-xs">
        <a href="#" class="menu-toggle-btn">
            <i class="fa fa-bars fa-2x"></i>
        </a>
        <div class="navigation responsive-menu">
            <ul>
                <li class="home"><a href="#templatemo">Home</a></li>
	            <li class="about"><a href="#about">About Us</a></li>
	            <li class="services"><a href="#services">Services</a></li>
	            <li class="portfolio"><a href="#portfolio">Portfolio</a></li>
	            <li class="contact"><a href="#contact">Contact</a></li>
            </ul> <!-- /.main_menu -->
        </div> <!-- /.responsive_menu -->
    </div> <!-- /responsive_navigation -->

	<div id="main-sidebar" class="hidden-xs hidden-sm">
		<div class="logo">
			<a href="http//www.templatemo.com/preview/templatemo_394_sonic" rel="nofollow"><h1>Sonic</h1></a>
			<span>Creative Portfolio Template</span>
		</div> <!-- /.logo -->

		<div class="navigation">
	        <ul class="main-menu">
	            <li class="home"><a href="#templatemo">Home</a></li>
	            <li class="about"><a href="#about">About Us</a></li>
	            <li class="services"><a href="#services">Services</a></li>
	            <li class="portfolio"><a href="#portfolio">Portfolio</a></li>
	            <li class="contact"><a href="#contact">Contact</a></li>
	        </ul>
		</div> <!-- /.navigation -->

	</div> <!-- /#main-sidebar -->

	<div id="main-content">

		<div id="templatemo">
			<div class="main-slider">
				<div class="flexslider">
					<ul class="slides">
                    
						<li>
							<div class="slider-caption">
								<h2>Responsive Layout</h2>
								<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p>
								<a href="http//www.templatemo.com/page/1" rel="nofollow" class="largeButton homeBgColor">Read More</a>
							</div>
							<img src="images/slide1.jpg" alt="Slide 1">
						</li>
                        
						<li>
							<div class="slider-caption">
								<h2>Portfolio Website</h2>
								<p>Fusce convallis enim vitae sagittis mollis. Sed bibendum ultricies dignissim.</p>
								<a href="http//www.templatemo.com/page/2" rel="nofollow" class="largeButton homeBgColor">Details</a>
							</div>
							<img src="images/slide2.jpg" alt="Slide 2">
						</li>
                        
                        <li>
							<div class="slider-caption">
								<h2>Free Templates</h2>
								<p>All templates are free to download and use for your personal or commercial websites.</p>
								<a href="http//www.templatemo.com" rel="nofollow" class="largeButton homeBgColor">Downloads</a>
							</div>
							<img src="images/slide3.jpg" alt="Slide 3">
						</li>
                        
					</ul>
				</div>
			</div>
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-12">
						<div class="welcome-text">
							<h2>Welcome to Sonic Template</h2>
							<p>Sonic is provided by templatemo website for everyone. Credit goes to <a href="http//flexslider.woothemes.com" rel="nofollow">FlexSlider</a>. Maecenas adipiscing pellentesque elit eu volutpat. Integer vitae <a href="#">pulvinar magna</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor mi metus, nec sagittis purus ultrices id.</p>
						</div>
					</div>
				</div>
			</div>
		</div> <!-- /#sTop -->

		<div class="container-fluid">

			<div id="about" class="section-content">
				<div class="row">
					<div class="col-md-12">
						<div class="section-title">
							<h2>About Us</h2>
						</div>
					</div>
				</div>
				<div class="row our-story">
					<div class="col-md-8">
						<h3>Our Management Team</h3>
						Quisque in metus tristique, gravida dolor ut, varius neque. Maecenas ac risus aliquam, facilisis massa id, vulputate elit. Curabitur pretium arcu dictum, faucibus diam quis, commodo turpis. Proin viverra, risus eget egestas sodales, felis ante scelerisque ligula, eget condimentum diam ligula eu tellus.
                        <br><br>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, exercitationem, laboriosam, modi non quisquam voluptas accusamus numquam ipsum reiciendis saepe veniam cupiditate explicabo autem. Repudiandae tempore dolore deserunt nemo voluptatum consectetur aspernatur expedita aliquid iste illo enim molestias vel animi quod.
					</div>
                    <div class="col-md-8">
						<h3>Our Management Team</h3>
						Quisque in metus tristique, gravida dolor ut, varius neque. Maecenas ac risus aliquam, facilisis massa id, vulputate elit. Curabitur pretium arcu dictum, faucibus diam quis, commodo turpis. Proin viverra, risus eget egestas sodales, felis ante scelerisque ligula, eget condimentum diam ligula eu tellus.
                        <br><br>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, exercitationem, laboriosam, modi non quisquam voluptas accusamus numquam ipsum reiciendis saepe veniam cupiditate explicabo autem. Repudiandae tempore dolore deserunt nemo voluptatum consectetur aspernatur expedita aliquid iste illo enim molestias vel animi quod.
					</div>
					<div class="col-md-4">
						<div class="story-image">
							<img src="images/responsive-design.jpg" alt="">
						</div>
					</div>
				</div> <!-- /.row -->
			</div> <!-- /#about -->
			
			<div id="services" class="section-content">
				<div class="row">
					<div class="col-md-12">
						<div class="section-title">
							<h2>Services</h2>
						</div> <!-- /.section-title -->
					</div> <!-- /.col-md-12 -->
				</div> <!-- /.row -->
				<div class="row">
					<div class="col-md-4">
						<div class="service-item clearfix">
							<div class="service-icon">
								<i class="fa fa-bolt fa-2x"></i>
							</div>
							<div class="service-content">
								<h3>The Best<br>Support Ever</h3>
							</div>
						</div> <!-- /.service-item -->
					</div> <!-- /.col-md-4 -->
					<div class="col-md-4">
						<div class="service-item">
							<div class="service-icon">
								<i class="fa fa-laptop fa-2x"></i>
							</div>
							<div class="service-content">
								<h3>Fully<br>Responsive Design</h3>
							</div>
						</div> <!-- /.service-item -->
					</div> <!-- /.col-md-4 -->
					<div class="col-md-4">
						<div class="service-item">
							<div class="service-icon">
								<i class="fa fa-pencil fa-2x"></i>
							</div>
							<div class="service-content">
								<h3>Unlimited<br>Layouts Options</h3>
							</div>
						</div> <!-- /.service-item -->
					</div> <!-- /.col-md-4 -->
				</div> <!-- /.row -->
				<div class="row our-skills">
					<div class="col-md-8">
						<h3>Our Skills</h3>
						Integer hendrerit erat sed tellus pretium, eu sodales eros dignissim. Duis augue eros, mollis ac velit at, rutrum tincidunt ipsum. Morbi semper dui id fringilla semper. Etiam vulputate sagittis vestibulum. Vivamus ac ante cursus, feugiat ipsum et, aliquet justo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, minima soluta numquam perferendis illum alias omnis commodi error veritatis a esse nostrum asperiores recusandae.
					</div>
					<div class="col-md-4">
						<ul class="progess-bars">
							<li>
								<div class="progress">
									<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">Graphics 90%</div>
								</div>
							</li>
							<li>
								<div class="progress">
									<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">HTML5 CSS3 75%</div>
								</div>
							</li>
							<li>
								<div class="progress">
									<div class="progress-bar" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="width: 66%;">WordPress 66%</div>
								</div>
							</li>
							<li>
								<div class="progress">
									<div class="progress-bar" role="progressbar" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100" style="width: 88%;">Marketing 88%</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div> <!-- /#services -->

			<div id="portfolio" class="section-content">
				<div class="row">
					<div class="col-md-12">
						<div class="section-title">
							<h2>Portfolio</h2>
						</div> <!-- /.section-title -->
					</div> <!-- /.col-md-12 -->
				</div> <!-- /.row -->
				<div class="row">
					<div class="col-md-4">
						<div class="portfolio-item">
							<div class="portfolio-thumb">
								<img src="images/1.jpg" alt="Fantasy">
								<div class="overlay-p">
									<a href="images/1.jpg" data-gal="prettyPhoto">
										<i class="fa fa-arrows-alt fa-2x"></i>
									</a>
								</div>
							</div> <!-- /.portfolio-thumb -->
							<h3 class="portfolio-title"><a href="#">Fantasy</a></h3>
						</div> <!-- /.portfolio-item -->
					</div> <!-- /.col-md-4 -->
					<div class="col-md-4">
						<div class="portfolio-item">
							<div class="portfolio-thumb">
								<img src="images/2.jpg" alt="Botany">
								<div class="overlay-p">
									<a href="images/2.jpg" data-gal="prettyPhoto">
										<i class="fa fa-arrows-alt fa-2x"></i>
									</a>
								</div>
							</div> <!-- /.portfolio-thumb -->
							<h3 class="portfolio-title"><a href="#">Botany</a></h3>
						</div> <!-- /.portfolio-item -->
					</div> <!-- /.col-md-4 -->
					<div class="col-md-4">
						<div class="portfolio-item">
							<div class="portfolio-thumb">
								<img src="images/3.jpg" alt="Universe">
								<div class="overlay-p">
									<a href="images/3.jpg" data-gal="prettyPhoto">
										<i class="fa fa-arrows-alt fa-2x"></i>
									</a>
								</div>
							</div> <!-- /.portfolio-thumb -->
							<h3 class="portfolio-title"><a href="#">Universe</a></h3>
						</div> <!-- /.portfolio-item -->
					</div> <!-- /.col-md-4 -->
				</div> <!-- /.row -->
				<div class="row">
					<div class="col-md-4">
						<div class="portfolio-item">
							<div class="portfolio-thumb">
								<img src="images/4.jpg" alt="Channel">
								<div class="overlay-p">
									<a href="images/4.jpg" data-gal="prettyPhoto">
										<i class="fa fa-arrows-alt fa-2x"></i>
									</a>
								</div>
							</div> <!-- /.portfolio-thumb -->
							<h3 class="portfolio-title"><a href="#">Channel</a></h3>
						</div> <!-- /.portfolio-item -->
					</div> <!-- /.col-md-4 -->
					<div class="col-md-4">
						<div class="portfolio-item">
							<div class="portfolio-thumb">
								<img src="images/5.jpg" alt="Dragonfly">
								<div class="overlay-p">
									<a href="images/5.jpg" data-gal="prettyPhoto">
										<i class="fa fa-arrows-alt fa-2x"></i>
									</a>
								</div>
							</div> <!-- /.portfolio-thumb -->
							<h3 class="portfolio-title"><a href="#">Dragonfly</a></h3>
						</div> <!-- /.portfolio-item -->
					</div> <!-- /.col-md-4 -->
					<div class="col-md-4">
						<div class="portfolio-item">
							<div class="portfolio-thumb">
								<img src="images/6.jpg" alt="Titanium">
								<div class="overlay-p">
									<a href="images/6.jpg" data-gal="prettyPhoto">
										<i class="fa fa-arrows-alt fa-2x"></i>
									</a>
								</div>
							</div> <!-- /.portfolio-thumb -->
							<h3 class="portfolio-title"><a href="#">Titanium</a></h3>
						</div> <!-- /.portfolio-item -->
					</div> <!-- /.col-md-4 -->
				</div> <!-- /.row -->
				<div class="row">
					<div class="col-md-12">
						<div class="load-more">
							<a href="#portfolio" class="largeButton portfolioBgColor">Load More</a>
						</div>
					</div>
				</div>
			</div> <!-- /#portfolio -->

			<div id="contact" class="section-content">
				<div class="row">
					<div class="col-md-12">
						<div class="section-title">
							<h2>Contact Us</h2>
						</div> <!-- /.section-title -->
					</div> <!-- /.col-md-12 -->
				</div> <!-- /.row -->
				<div class="row">
					<div class="col-md-12">
						<div class="map-holder">
							<div class="google-map-canvas" id="map-canvas" style="height: 400px;">
                    		</div>
						</div> <!-- /.map-holder -->
					</div> <!-- /.col-md-12 -->
				</div> <!-- /.row -->
				<div class="row contact-form">
					<div class="col-md-4">
						<label for="name-id" class="required">Name:</label>
						<input name="name-id" type="text" id="name-id" maxlength="40">
					</div> <!-- /.col-md-4 -->
					<div class="col-md-4">
						<label for="email-id" class="required">Email:</label>
						<input name="email-id" type="text" id="email-id" maxlength="40">
					</div> <!-- /.col-md-4 -->
					<div class="col-md-4">
						<label for="subject-id">Subject:</label>
						<input name="subject-id" type="text" id="subject-id" maxlength="60">
					</div> <!-- /.col-md-4 -->
					<div class="col-md-12">
						<label for="message-id" class="required">Message:</label>
						<textarea name="message-id" id="message-id" rows="6"></textarea>
					</div> <!-- /.col-md-12 -->
					<div class="col-md-12">
						<div class="submit-btn">
							<a href="#" class="largeButton contactBgColor">Send Message</a>
						</div> <!-- /.submit-btn -->
					</div> <!-- /.col-md-12 -->
				</div>
			</div> <!-- /#contact -->

		</div> <!-- /.container-fluid -->

		<div class="site-footer">
			<div class="first-footer">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12">
							<div class="social-footer">
								<ul>
									<li><a href="#" class="fa fa-facebook"></a></li>
									<li><a href="#" class="fa fa-twitter"></a></li>
									<li><a href="#" class="fa fa-dribbble"></a></li>
									<li><a href="#" class="fa fa-linkedin"></a></li>
									<li><a href="#" class="fa fa-rss"></a></li>
								</ul>
							</div> <!-- /.social-footer -->
						</div> <!-- /.col-md-12 -->
					</div> <!-- /.row -->
				</div> <!-- /.container-fluid -->
			</div> <!-- /.first-footer -->
			<div class="bottom-footer">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-6">
							<p class="copyright">Copyright © 2084 <a href="#">Your Company Name</a>
                            </p>
						</div> <!-- /.col-md-6 -->
						<div class="col-md-6 credits">
							<p>Design: <a href="http//www.templatemo.com/preview/templatemo_394_sonic" rel="nofollow">Sonic</a> download from <a href="http//www.mianfeimoban.com">mianfeimoban</a></p>
                            <!-- / please support templatemo.com by providing a credit link. thank you. / -->
						</div> <!-- /.col-md-6 -->
					</div> <!-- /.row -->
				</div> <!-- /.container-fluid -->
			</div> <!-- /.bottom-footer -->
		</div> <!-- /.site-footer -->

	</div> <!-- /#main-content -->

	<!-- JavaScripts -->
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/jquery.singlePageNav.js"></script>
	<script src="js/jquery.flexslider.js"></script>
	<script src="js/jquery.prettyPhoto.js"></script>
	<script src="js/custom.js"></script>
	<script>
		$(document).ready(function(){
			$("a[data-gal^='prettyPhoto']").prettyPhoto({hook: 'data-gal'});
		});

        function initialize() {
          var mapOptions = {
            zoom: 11,
            center: new google.maps.LatLng(16.8451789,96.1439764)
          };

          var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        function loadScript() {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
              'callback=initialize';
          document.body.appendChild(script);
        }

        window.onload = loadScript;
    </script>

</body>
</html>
